<template>
  <div class="l-rblock l-desktop">
    <div v-show="steps(0)" class="l-rblock" style="padding: 24px">
      <div class="l-page-panel">
        <el-form
          :model="formData"
          :rules="rules"
          size="mini"
          ref="baseInfo"
          label-width="80px"
        >
          <el-col :span="24">
            <el-form-item :label="$t('名称')" prop="f_Name">
              <el-input v-model="formData.f_Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('图标')" prop="f_Icon">
              <l-input-icon onlyFirst v-model="formData.f_Icon"> </l-input-icon>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('分类')" prop="f_PModuleId">
              <el-select
                v-model="formData.f_PModuleId"
                :placeholder="$t('请选择分类')"
              >
                <el-option
                  v-for="item in lr_dataItem['function']"
                  :key="item.f_ItemValue"
                  :label="item.f_ItemName"
                  :value="item.f_ItemValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('排序')" prop="f_SortCode">
              <el-input-number
                v-model="formData.f_SortCode"
                controls-position="right"
                :min="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('首屏')" prop="f_IsFirst">
              <el-switch
                :active-value="3"
                :inactive-value="4"
                v-model="formData.f_IsFirst"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('状态')" prop="f_EnabledMark">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="formData.f_EnabledMark"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('描述')" prop="f_Description">
              <el-input
                type="textarea"
                :rows="4"
                v-model="formData.f_Description"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
    <div v-show="steps(1)" class="l-rblock">
      <l-quick-bi-design
        ref="quickBiDesign"
        :isApp="true"
        :isShow="steps(1)"
        :componentList="componentList"
      >
      </l-quick-bi-design>
    </div>
  </div>
</template>
<script>
import componentList from "./components";
import "./components/base";
import "./components/view";

const apiAppFunction = window.$api.mapp.module;
export default {
  provide() {
    return {
      appDesign: this,
    };
  },
  props: {
    stepActive: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      componentList,
      formData: {
        f_Type: 2, // 移动桌面
        f_Name: "",
        f_Icon: "learun-icon-m-desktop",
        f_PModuleId: "",
        f_SortCode: "",
        f_IsMenu: 0,
        f_EnabledMark: 1,
        f_IsFirst: 3,
        f_Description: "",
      },
      rules: {
        f_Name: [{ required: true, message: this.$t("请输入名称"), trigger: "blur" }],
        f_Icon: [{ required: true, message: this.$t("请选择图标"), trigger: "blur" }],
        f_PModuleId: [
          { required: true, message: this.$t("请选择分类"), trigger: "blur" },
        ],
      },
      layout: [],
      apps: [],
    };
  },
  computed: {
    appTree() {
      let list = this.apps;
      const map = {};
      const res = [];
      const dataItemList = this.lr_dataItem["function"];
      dataItemList.forEach((item) => {
        let point = {
          label: item.f_ItemName,
          value: item.f_ItemValue,
          disabled: true,
          children: [],
        };
        map[item.f_ItemValue] = point.children;
        res.push(point);
      });
      list.forEach((item) => {
        if (item.f_IsSystem != 3 && item.f_IsSystem != 4) {
          item.label = item.f_Name;
          item.value = item.f_Id;
          if (!map[item.f_Type]) {
            let point = {
              label: item.f_Type,
              value: item.f_Type,
              children: [],
            };
            map[item.f_Type] = point.children;
            res.push(point);
          }
          map[item.f_Type].push(item);
        }
      });
      return res;
    },
  },
  mounted() {
    this.lr_loadDataSourceList();
    this.loadAppList();
  },
  methods: {
    async loadAppList() {
      await this.lr_loadDataItem("function");
      this.apps = await this.$awaitWraper(apiAppFunction.getList());
    },
    resetForm() {
      this.formData.f_Id = "";
      this.formData.f_ModuleId = "";
      this.$refs.baseInfo && this.$refs.baseInfo.resetFields();
      this.$refs.quickBiDesign && this.$refs.quickBiDesign.set([]);
    },
    getForm() {
      return new Promise((resolve) => {
        window
          .html2canvas(this.$refs.quickBiDesign.appbiPanel, {
            useCORS: true,
            allowTaint: true,
            width: 381,
          })
          .then((canvas) => {
            const postData = {
              lr_desktop_infoEntity: this.$deepClone(this.formData),
              lr_desktop_schemeEntity: {
                f_Content: JSON.stringify(this.$refs.quickBiDesign.get()),
              },
            };

            if (postData.lr_desktop_infoEntity.f_IsFirst == 3) {
              postData.lr_desktop_infoEntity.f_IsMenu = 0;
            } else {
              postData.lr_desktop_infoEntity.f_IsMenu = 1;
            }

            postData.functionEntity = {
              f_Name: postData.lr_desktop_infoEntity.f_Name,
              f_Type: postData.lr_desktop_infoEntity.f_PModuleId,
              f_Icon: postData.lr_desktop_infoEntity.f_Icon,
              f_IsSystem: postData.lr_desktop_infoEntity.f_IsFirst, // 桌面设计
              f_EnabledMark: postData.lr_desktop_infoEntity.f_EnabledMark,
              f_SortCode: postData.lr_desktop_infoEntity.f_SortCode,
              f_Color: "#3c9cff",
            };

            postData.lr_desktop_infoEntity.img = canvas.toDataURL("image/jpeg");
            resolve(postData);
          });
      });
    },
    setForm(data) {
      this.formData = data.lr_desktop_infoEntity;
      this.$refs.quickBiDesign.set(
        JSON.parse(data.lr_desktop_schemeEntity.f_Content)
      );
    },

    steps(num) {
      return this.stepActive == num;
    },
    validateBaseInfo() {
      return new Promise((resolve) => {
        this.$refs.baseInfo.validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    validateSteps() {
      return new Promise((resolve) => {
        if (this.stepActive == 0) {
          // 判断基础信息是否填写完整
          this.validateBaseInfo().then((res) => {
            resolve(res);
          });
        } else {
          resolve(true);
        }
      });
    },
  },
};
</script>

